<template>
    <div class="my-password">
        <el-tabs v-model="current">
            <el-tab-pane label="密码修改" name="password" />
        </el-tabs>
        <div class="word-box mt-20 f f-ac f-col">
            <div class="word-row f f-ac">
                <div class="row-title">原密码：</div>
                <div class="f-1">
                    <el-input v-model="userForm.old" placeholder="输入原密码" size="small" clearable maxlength="20" type="password"
                        style="width: 220px" />
                </div>
            </div>
            <div class="word-row f f-ac">
                <div class="row-title">新密码：</div>
                <div class="f-1">
                    <el-input v-model="userForm.new" placeholder="输入新密码" size="small" clearable maxlength="20"
                        type="password" style="width: 220px" />
                </div>
            </div>
            <div class="word-row f f-ac">
                <div class="row-title">确认密码：</div>
                <div class="f-1">
                    <el-input v-model="confirmPassword" placeholder="输入确认密码" size="small" clearable type="password"
                        maxlength="20" style="width: 220px" />
                </div>
            </div>
            <div class="word-row f f-ac">
                <div class="row-title"></div>
                <div class="f-1">
                    <div class="form-btn" @click="handleSubmit">保存修改</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        userPassword
    } from "@/utils/home/index.js";
    export default {
        data() {
            return {
                current: "password", // 当前选中状态
                userForm: {
                    old: "",
                    new: "",
                },
                confirmPassword: "",
            };
        },

        mounted() {},

        methods: {
            // 保存修改
            handleSubmit() {
                let that = this
                if (that.confirmPassword != that.userForm.new) {
                    that.$message.error('请再次确认密码 ！');
                    return;
                }
                userPassword(that.userForm).then((response) => {
                    that.$message.success("保存成功");
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .my-password {
        width: 100%;
        min-height: 483px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 20px;
        box-shadow: 0px 3px 10px rgba(217, 217, 217, 0.5);

        .word-box {
            width: 100%;

            .word-row {
                margin-bottom: 20px;

                .row-title {
                    width: 80px;
                    color: #333;
                    font-size: 14px;
                    text-align: right;
                }

                .form-btn {
                    user-select: none;
                    width: 220px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    border-radius: 5px;
                    color: #fff;
                    font-size: 14px;
                    font-weight: 600;
                    background-color: #0a4ab6;

                    &:hover {
                        cursor: pointer;
                        background-color: #0e54ce;
                    }

                    &:active {
                        background-color: #0a4ab6;
                    }
                }
            }
        }
    }

    :deep(.el-tabs__item) {
        color: #909090;
    }

    :deep(.el-tabs__nav .is-active) {
        color: #466ec5;
    }

    :deep(.el-tabs__active-bar) {
        background-color: #466ec5;
    }

    :deep(.el-tabs__nav-wrap::after) {
        display: none;
    }
</style>